import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHistory } from 'vue-router'
import { PROJECT_KEY } from './config'
import {pinia, useUserStore}  from '@/stores'

//import actions from './action/index'
//import store from './store/index'

// 不能直接掛載 需要切換的時候，調用mount方法時候再去掛載
// createApp(App).use(router).mount('#app')

let history
let router
let app

function render (props) {
  const { container } = props
  history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/vue-js/' : '/')  // url 相對路徑
  router = createRouter({
    history,
    routes
  })
  app = createApp(App)
  //console.log(props.store)
  // props.store = toRef(props.store)
  // console.log(props.store.value)
  app.use(router)
  app.use(pinia)
  //.use(store(props.store))
  .mount(container ? container.querySelector('#app') : '#app')
}


/**
 * ootstrap引导函数
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap () {
  console.log('vue3 app bootstrap')
}

/**
 * 挂载函数
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 * @param {*} props 屬性
 */
export async function mount (props) {
  // 把actions实例的actions对象值设置为props，这样actions对象值就有props里面的onGlobalStateChange等方法了，之后可以在vue页面调用。
  // 相当于将action对象绑到Vue原型上，为了项目中其他地方使用方便Vue.prototype.$actions = actions 、 Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange、Vue.prototype.$setGlobalState = props.setGlobalState
  // actions.setActions(props.actions)
  console.log('vue3 app mount', props)
  render(props)

  //const store_global = useGlobalStore(PROJECT_KEY)
  //store_global.setGlobalActions(props.globalActions)


  const store_user = useUserStore(PROJECT_KEY)
  store_user.setUser(props.data)

  store_user.setRemoteUpdater(props.setUser)

  props.onChangeStore?.((store) =>{
    console.log(PROJECT_KEY,"store",store)
    store_user.setUser(store)
  })

}

/**
 * 卸载函数
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount () {
  const store_user = useUserStore(PROJECT_KEY);
  store_user.delUser();

  store_user.clearUserChange();
  //const store_global = useGlobalStore(PROJECT_KEY);
  //store_global.delGlobalActions();

  console.log('vue3 app unmount')
  history = null
  router = null
  app = null
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update (props) {
  console.log('update props', props)
}

// qiankun 在渲染前 給我提供了一個變量 window.__POWERED_BY_QIANKUN__
if (!window.__POWERED_BY_QIANKUN__) {
  // 獨立自己運行
  console.warn(PROJECT_KEY, '子應用單獨訪問');

  render({})
}